<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div>
        <img src="../assets/wb.png" />
        <span>短视频平台</span>
      </div>
      <div>
        <el-button type="info" size="mini" @click="backlogin()">退出</el-button>
      </div>
    </el-header>
    <!-- 主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          :router="true"
          default-active="/welcome"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#fff"
        >
          <!-- 主页 -->
          <el-menu-item index="/welcome">
            <i class="el-icon-menu"></i>
            <span slot="title">欢迎页</span>
          </el-menu-item>
          <!-- 用户管理 -->
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/useradd">
             <i class="el-icon-star-off"></i>
              <span slot="title">用户添加</span>
            </el-menu-item>
              <el-menu-item index="/user">
             <i class="el-icon-star-on"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
          </el-submenu>
          <!-- 视频管理 -->
           <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-loading"></i>
              <span slot="title">短视频管理</span>
            </template>
            <el-menu-item index="/12">
             <i class="el-icon-success"></i>
              <span slot="title">视频添加</span>
            </el-menu-item>
              <el-menu-item index="/video">
             <i class="el-icon-s-fold"></i>
              <span slot="title">视频列表</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      
      <!-- 左侧导航栏 -->
      <!-- 右侧主体部分-->
      <el-main>
          <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  methods: {
    backlogin(){
      // 清空当前token、
      window.sessionStorage.clear('token');
      // 跳转到主页
      this.$router.push('/')
    }
  }
}
</script>
<style lang="scss" scoped >
.el-container{
    height: 100%;
}
.el-header {
  //   border: 1px solid red;
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;

  font-size: 20px;
  div {
    display: flex;
    align-items: center; //居中对齐弹性盒的各项 <div> 元素
    span {
      margin-left: 30px;
    }
  }
}
.el-aside{
    background-color: #333;
   
}
.el-main{
    background-color: #ccc;
}
</style>